<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>爱卡智能管家</title>
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_419446_klbjbykkvmyousor.css">
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css">

    <link rel="stylesheet" type="text/css" href="../css/style.css">
<body>
<header class="mui-bar mui-bar-nav w-nav" style="background: #1eaaf1; font-size: 14px;">
    <a class="mui-pull-left" style="color: #ffffff">合肥
        <span class="mui-icon mui-icon-arrowdown" style="padding-top: 8px;"></span>
    </a>
    <h1 class="mui-title" style="color: #ffffff">爱卡智能管家</h1>
    <a  class="mui-pull-right" style="color: #ffffff; margin-top: 12px;">
        交易记录
    </a>
</header>

<div class="index-box">
    <a href="">
        <img src="../images/09.png" />
        <h4>收款</h4>
    </a>
    <a href="">
        <img src="../images/06.png" />
        <h4>智能规划</h4>
    </a>
    <a href="">
        <img src="../images/03.png" />
        <h4>手动规划</h4>
    </a>
</div>

<div class="scroll">
    <img src="../images/04.png" />
    <span>通知内容某些某小红帽的故事</span>
    <div class="clear"></div>
</div>


<div class="index-content">
    <h2><i>|</i>更多服务</h2>
    <ul>
        <li>
            <a href="">
                <img src="../images/33.png" />
                <p>网络贷款</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="../images/27.png" />
                <p>网络贷款</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="../images/30.png" />
                <p>网络贷款</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="../images/37.png" />
                <p>网络贷款</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="../images/40.png" />
                <p>网络贷款</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="../images/38.png" />
                <p>网络贷款</p>
            </a>
        </li>

        <li>
            <a href="">
                <img src="../images/45.png" />
                <p>网络贷款</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="../images/46.png" />
                <p>网络贷款</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="../images/47.png" />
                <p>网络贷款</p>
            </a>
        </li>
        <div class="clear"></div>
    </ul>
</div>

<div>
    <img style="width: 100%" src="../images/51.png" />
</div>

<div class="index-bill">
    <h2>
        <span class="fl"><i>|</i>最新账单</span>
        <span class="fr">
            查看更多
            <span class="mui-icon mui-icon-forward" style="font-size: 16px;"></span>
        </span>
        <div class="clear"></div>
    </h2>

    <ul>
        <li>
            <a href="#">
                <img class="fl" src="../images/54.png" />
                <div class="fl">
                    <h3>还款消费</h3>
                    <p>消费信用卡 尾号 （4108）</p>
                    <p>2017/09/06 14:12:40</p>
                </div>
                <div class="fr">
                    <h5>¥ 198.00</h5>
                    <p style="color: #1eaaf1">成功</p>
                </div>
                <div class="clear"></div>
            </a>
        </li>
        <li>
            <a href="">
                <img class="fl" src="../images/54.png" />
                <div class="fl">
                    <h3>还款消费</h3>
                    <p>消费信用卡 尾号 （4108）</p>
                    <p>2017/09/06 14:12:40</p>
                </div>
                <div class="fr">
                    <h5>¥ 198.00</h5>
                    <p style="color: #1eaaf1">成功</p>
                </div>
                <div class="clear"></div>
            </a>
        </li>
        <li>
            <a href="">
                <img class="fl" src="../images/54.png" />
                <div class="fl">
                    <h3>还款消费</h3>
                    <p>消费信用卡 尾号 （4108）</p>
                    <p>2017/09/06 14:12:40</p>
                </div>
                <div class="fr">
                    <h5>¥ 198.00</h5>
                    <p style="color: #1eaaf1">成功</p>
                </div>
                <div class="clear"></div>
            </a>
        </li>
    </ul>
</div>

<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-active" href="#tabbar">
        <span class="mui-icon iconfont icon-wode"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-chat">
        <span class="mui-icon  iconfont icon-huankuan"></span>
        <span class="mui-tab-label">还款</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-contact">
        <span class="mui-icon  iconfont icon-fenxiang"></span>
        <span class="mui-tab-label">分享</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-map">
        <span class="mui-icon  iconfont icon-shangcheng"></span>
        <span class="mui-tab-label">商城</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-map">
        <span class="mui-icon  iconfont icon-wode"></span>
        <span class="mui-tab-label">我</span>
    </a>
</nav>
</body>
<script type="text/javascript" src="../js/mui.min.js"></script>
</head>
</html>